<template>
  <div class="clearfix" v-loading="loading">
    <el-row class="base_content_title">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="content_edit pd_20" style="padding-top:20px;">
      <div id="diy-phone" style="margin-top:0">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <div class="materialPrePanel mgt20">
            <p>课程内容：</p>
            <div>
              <!-- <dt> -->
              <div class="single-summary" v-html="add_form.content"></div>
              <!-- </dt> -->
              <!-- <div class="single-summary pd10 ql-editor"
                                style="border:none"
              v-html='add_form.content'></div>-->
            </div>
          </div>
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
        <div class="black">
          <div class="add_con_form" style="padding-left: 25px;">
            <el-form label-position="left" :model="add_form">
              <el-form-item label="选择类别：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-select v-model="add_form.cid" clearable placeholder="请选择" style="width: 220px">
                    <el-option v-for="item in cate_option" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="人物：" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-input type="text" :rows="6" disabled clearable placeholder="请输入" v-model="char_title" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="8" :offset="2">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="character_show=true">添加</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="课程名称：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程介绍：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.intro" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程封面：" :label-width="formLabelWidth">
                <el-col :span="12">
                  <el-input v-model="add_form.piclink" autocomplete="off" disabled="disabled" class="mar_bottom_5"></el-input>
                  <uploadpic :piclink="add_form.piclink" :width="300" :height="175" :is_more="false" @send_pic="get_pic"></uploadpic>
                </el-col>
              </el-form-item>
              <el-form-item label="课程实价：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.price" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程市场价：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.market_price" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程成本：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.cost" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="点击量：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="Number" :rows="6" clearable placeholder="请输入" v-model="add_form.hit" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="点赞量：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="Number" :rows="6" clearable placeholder="请输入" v-model="add_form.likes" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="是否上架" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-switch class="zdySwith" :width="82" v-model="add_form.show" active-color="#13ce66" inactive-color="#ffffff" active-text="上架"
                      inactive-text="下架" active-value="1" inactive-value="0"></el-switch>
                </el-col>
              </el-form-item>
              <el-form-item label="是否付费" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-switch class="zdySwith" :width="82" v-model="add_form.is_free" active-color="#13ce66" inactive-color="#ffffff" active-text="收费"
                      inactive-text="免费" active-value="1" inactive-value="0"></el-switch>
                </el-col>
              </el-form-item>
              <el-form-item label="购买赠送积分：" v-if="add_form.is_free == 1" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.integral" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="课程介绍视频：" :label-width="formLabelWidth">
                <el-button :loading="$store.state.isLoading" type="primary" @click="uploadVideo()">上传</el-button>
                <el-col :span="16">
                  <el-input type="text" clearable :rows="6" placeholder="请上传课程介绍视频" v-model="add_form.video"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="black">
          <div class="ueditor">
            <ue v-model="add_form.content" v-loading="loadding1" v-if="!loadding1" :value="add_form.content" style="width:375px"
                upload-url="/api/common/upload/index/" fileName="file" />
            <div class="blank"></div>
          </div>
        </div>
        <div class="submit_button">
          <el-col :span="24" class="tc">
            <el-button :loading="$store.state.isLoading" type="primary" @click="subForm">保存</el-button>
          </el-col>
        </div>
        <!-- 小箭头 -->
        <i class="arrow arrow_out top150"></i>
      </div>
      <el-dialog :close-on-click-modal="false" @close="close_video" title="上传视频" :append-to-body="true" :visible.sync="dialogaddvideoVisible">
        <uploadvideo @send_url="rev_send_url" :pro_src="add_form.video" ref="video_plugin"></uploadvideo>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" style="margin-top: 10px;" @close="character_show = false" title="选择人物" :append-to-body="true"
          :visible.sync="character_show">
        <character @info="getInfo"></character>
      </el-dialog>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import uploadvideo from "@/components/currency/uploadvideo";
import ue from "@/components/currency/Ue/ue.vue";
import uploadpic from "@/components/page/pic/up_pic";
import character from "@/components/shop/course/characterInfo.vue"
export default {
  data () {
    return {
      loadding1: true,
      dialogaddvideoVisible: false,

      options: [{
        value: "",
        label: ""
      }],
      config: {
        qllink: false
      },
      cate_option: [],
      add_form: {
        cid: "",
        title: "",
        piclink: "",
        price: "",
        market_price: "",
        video: "",
        content: "",
        is_free: "0",
        hit: "",
        likes: "",
        intro: "",
        integral: "",
        show: "1",
        sid: ""
      },
      char_title: "",
      newsName: "",
      fileList: [],
      loading: true,
      formLabelWidth: "120px",
      character_show: false
    };
  },
  watch: {},
  components: {
    HeadTitle,
    uploadvideo,
    ue,
    uploadpic,
    character
  },
  methods: {
    getInfo (info, bool) {
      //获取人物信息
      this.add_form.sid = info.id;
      this.char_title = info.title;
      this.character_show = bool;
    },
    get_pic (pic) {
      this.up_show = false;
      this.add_form.piclink = pic;
    },
    get_cate_list () {
      this.loading = true;
      this.$api.getShops.get_selcate({}).then(res => {
        if (res.data.code == 200) {
          this.cate_option = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    close_video () {
      this.dialogaddvideoVisible = false;
      this.$refs.video_plugin.close_video();
    },
    rev_send_url (obj) {
      this.add_form.video = obj.video_url;
      this.add_form.video_pic = obj.video_pic;
      this.add_form.vid = obj.video_id;
    },
    uploadVideo () {
      //点击上传视频
      this.dialogaddvideoVisible = true;
    },
    onSuccess (pic) {
      this.add_form.piclink = pic;
    },
    handleItemChange (val) {
      var a = this.options.find(item => {
        //这里的chargingWorkNameList就是上面遍历的数据源
        return item.id === val;
        //筛选出匹配数据，是对应数据的整个对象
      });
      this.newsName = a.title;
    },
    subForm () {
      if (this.add_form.cid == "") {
        this.$fnc.alertError("添加失败!", "课程类别不能为空");
      } else if (this.add_form.title == "") {
        this.$fnc.alertError("添加失败!", "课程标题不能为空");
      } else if (this.$route.query.id == undefined) {
        this.add_submit();
      } else {
        this.edit_submit();
      }
    },
    add_submit () {
      //添加
      let params = {};
      // var params = this.add_form;
      params.cid = this.add_form.cid;
      params.title = this.add_form.title;
      params.piclink = this.add_form.piclink;
      params.price = this.add_form.price;
      params.market_price = this.add_form.market_price;
      params.video = this.add_form.video;
      params.content = this.add_form.content;
      params.hit = this.add_form.hit;
      params.likes = this.add_form.likes;
      params.intro = this.add_form.intro;
      params.integral = this.add_form.integral;
      params.show = this.add_form.show;
      params.cost = this.add_form.cost;
      params.sid = this.add_form.sid;
      this.$api.getShops.add_courselist(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "添加成功",
            url: this.$router.back(-1)
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    edit_submit () {
      //修改
      var params = {};
      params = this.add_form;
      this.$api.getShops.edit_courselist(params).then(res => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "修改成功",
            url: this.$router.back(-1)
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    }
  },

  beforeCreate () {
    //数据未加载之前调用loading
    this.loading = true;
  },
  created () {
    this.loading = false;
    if (this.$route.query.id) {
      this.$api.getShops
        .get_onecourse({
          id: this.$route.query.id
        })
        .then(res => {
          if (res.data.code == 200) {
            this.add_form.id = res.data.result.id;
            this.add_form.cid = res.data.result.cid;
            this.add_form.title = res.data.result.title;
            this.add_form.piclink = res.data.result.piclink;
            this.add_form.price = res.data.result.price;
            this.add_form.market_price = res.data.result.market_price;
            this.add_form.video = res.data.result.video;
            this.add_form.content = res.data.result.content;
            this.add_form.is_free = res.data.result.is_free;
            this.add_form.hit = res.data.result.hit;
            this.add_form.likes = res.data.result.likes;
            this.add_form.intro = res.data.result.intro;
            this.add_form.integral = res.data.result.integral;
            this.add_form.show = res.data.result.show;
            this.add_form.cost = res.data.result.cost;
            this.char_title = res.data.result.nickname;
            this.loadding1 = false;
            this.loading = false;
          } else {
            this.$fnc.alertError(res.data.result);
            this.loading = false;
          }
        });
    } else {
      this.add_form = {
        cid: "",
        title: "",
        piclink: "",
        price: "",
        market_price: "",
        video: "",
        content: "",
        hit: 0,
        likes: 0,
        intro: "",
        integral: 0
      };
    }
    this.get_cate_list();
  },
  mounted () { },
  computed: {}
};
</script>
<style scoped>
.course_phone {
  width: 100%;
  height: 120px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course_phone_left {
  width: 60%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.course_phone_left h1 {
  line-height: 32px;
}

.course_phone_left p {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 20px;
}

.course_phone_right {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
}

.course_phone_right img {
  height: 100%;
  border: 1px solid #eeeeee;
}

.course_phone_video {
  width: 95%;
  /* padding: 10px; */
  margin: 0 auto;
  border-top: 1px solid #eeeeee;
}

.course_phone_video p {
  font-size: 12px;
  /* color: #000; */
  line-height: 28px;
}

.course_phone_video video {
  width: 100%;
}
</style>
